<template>
	<view class="px-10 pt-10  pb-100">
		<view class="bg-white round-8 p-15">
			<view class="bg-fa round-8 flex flex-center w-p-100 h-180 relative">
				<image src="/static/image/add.png" class="video" v-if="sceneDetail.id==0"></image>
				<video :src="sceneDetail.video_url" v-else class="w-p-100 h-p-100 round-8"></video>
				<view class="btn-blue absolute bottom-8" @click="sceneRef.open()">选择数字人形象</view>
			</view>

			<view class="flex flex-x-space-between fw-600 mt-20">
				<text>{{voiceDetail.id==0?'选择声音':voiceDetail.title}}</text>
				<view class="text-blue flex flex-y-center fs-14 gap-4" @click="voiceRef.open()">
					请选择
					<text class="iconfont icon-youjiantou text-blue"></text>
				</view>
			</view>
		</view>
		<view class="bg-white round-8 p-15 mt-20">
			<view class="bg-fa ">
				<view class="round-8 p-12" :class="focus?'border-blue':'border-white'">
					<textarea @focus="focus=true" @blur="focus=false" v-model="form.text" class="h-100 fs-14 "
						placeholder="请输入或者粘贴文案..."></textarea>
				</view>
				<view class="flex flex-x-space-between mt-10">
					<text></text>
					<view class="round-30 bg-blue fs-12 flex flex-y-center px-12 py-8 text-white gap-6"
						@click="$page.open('/pages/app/copywriting')">
						<text class="iconfont icon-magic fs-14"></text>
						AI智能文案
					</view>
				</view>
			</view>
		</view>
		
		<view class='bg-white p-15 round-8 mt-20'>
			<text class="fw-600">视频名称</text>
			<view class="bg-fa round-6 mt-6 p-12">
				<input  placeholder="请输入视频名称..." class="fs-14" v-model="form.title"/>
			</view>
		</view>
		<Scene ref="sceneRef" @selected="selectedScene"></Scene>
		<Voice ref="voiceRef" @selected="selectedVoice"></Voice>
		<y-footer @success="submit"> {{sbumitText}}</y-footer>
	</view>
</template>

<script setup>
	import { ref,computed } from 'vue';
	import Scene from './modules/scene.vue';
	import Voice from './modules/voice.vue';
	import { createWorks } from '@/api/works.js'
	import { $page, $tool } from '@/utils';
	import { useRefs, useWebConfigStore } from '@/stores'
	
	
	const sbumitText = computed(() => {
		if (WEBCONFIG?.value.worksPoint==0) {
			return '免费创建';
		}
		return '创建数字人 每秒消耗算力:' + WEBCONFIG?.value.worksPoint
	})
	
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const focus = ref(false)
	const form = ref({
		title: '',
		text: ''
	})
	const sceneDetail = ref({
		id: 0
	})
	const voiceDetail = ref({
		id: 0
	})
	const sceneRef = ref(null)
	const voiceRef = ref(null)
	const selectedScene = (e) => {
		sceneDetail.value = e
	}
	const selectedVoice = (e) => {
		voiceDetail.value = e
	}

	const submit = () => {
		if (form.value.title == '' || form.value.text == '') {
			$tool.toast('请填写完整数据');
			return;
		}
		if (sceneDetail.value.id == 0) {
			$tool.toast('请选择形象');
			return;
		}
		if (voiceDetail.value.id == 0) {
			$tool.toast('请选择音色');
			return;
		}
		uni.showLoading({
			title: '创建任务中...'
		})
		const data = {
			scene_id: sceneDetail.value.id,
			voice_id: voiceDetail.value.id,
			...form.value
		}
		createWorks(data).then(res => {
			$tool.toast('创建任务成功');
			setTimeout(() => {
				$page.back()
			}, 500)
		})
	}
</script>

<style>
	.video {
		width: 56px;
		height: 56px;
	}
</style>